@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2+px;
    
}
*{
    font-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
//打开游戏规则
#check{
        display: none;
    }
#check:checked ~ .web .guize{
     display: block;
 }  
 
 //关闭游戏规则
#btnoff{
     display: none;
 }
#btnoff:checked ~ .web .guize{
     display: none;
   }
   
//开始游戏
#play{
    display: none;
}   
#play:checked ~ .web{
    display: none;
}
#play:checked ~ .loading{
    display: block;
}
.web{
    width: 100%;
    overflow: hidden;
    position: relative;
    .bgimg{
      height: 100%;
      overflow: hidden;
      img{
          width: 100%;
        }
    }
    .shuiwen{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        overflow: hidden;
        animation-name: shuiwen;
        animation-duration:8s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        img{
            width: 100%;
        }
    }
    @keyframes shuiwen{
        0%{
            transform: scale(1);
        }
        25%{
            transform: scale(1.05);
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(1.05);
        }
        100%{
            transform: scale(1);
        }
    }
    //人物
    .peo{
        width: p(638);
        height: p(721);
        overflow: hidden;
        position: absolute;
        top: p(129);
        img{
            width: 100%;
        }
    }
    //logo
    .logo{
        width: p(184);
        height: p(74);
        position: absolute;
        top: p(45);
        right: p(44);
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    //文字1
    .title1{
        width: p(270);
        height: p(191);
        overflow: hidden;
        position: absolute;
        top: p(48);
        left: p(-500);//p(40)
        animation-name: title1;
        animation-duration: 0.5s;
        animation-timing-function: cubic-bezier(.72,.64,.41,1.31);
        animation-iteration-count: initial;
        animation-fill-mode: forwards;
        img{
            width: 100%;
        }
    }
     @keyframes title1{
         0%{
             left: p(-500);
         }
         100%{
             left: p(40);
         }
     }
    //文字2
    .title2{
        width: p(262);
        height: p(176);
        overflow: hidden;
        position: absolute;
        top: p(228);
        left: p(37);
        animation-name: title1;
        animation-duration: 1s;
        animation-timing-function: cubic-bezier(.72,.64,.41,1.31);
        animation-iteration-count: initial;
        animation-fill-mode: forwards;
        img{
            width: 100%;
        }
    }
    //文字3
    .title3{
        width: p(399);
        height: p(215);
        overflow: hidden;
        position: absolute;
        top: p(343);
        left: p(44);
        animation-name: title1;
        animation-duration: 1.5s;
        animation-timing-function: cubic-bezier(.72,.64,.41,1.31);
        animation-iteration-count: initial;
        animation-fill-mode: forwards;
        img{
            width: 100%;
        }
    }
    //按钮
    .btn{
        width: p(303);
        height: p(120);
        overflow: hidden;
        position: absolute;
        bottom: p(141);
        left: 26.35%;
        animation-name: btn;
        transition: all 1s;
        animation-duration:1s;
//      animation-timing-function: cubic-bezier(.72,.64,.41,1.31);
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        img{
            width: 100%;
        }
    }
    @keyframes btn{
         0%{
             transform: scaleX(1) scaleY(1);
         }
         25%{
             transform: scaleX(1.2) scaleY(1);
         }
         50%{
             transform: scaleX(0.7) scaleY(1.1);
         }
         75%{
             transform: scaleX(1) scaleY(1);
         }
         100%{
             transform: scaleX(1) scaleY(1);
         }
     }
    //游戏规则
    .game{
        font-size: p(31);
        color: #fffffe;
        line-height: p(31);
        font-weight: bold;
        letter-spacing: p(8);
        position: absolute;
        bottom: p(90);
        left: 37.8%;
    }
    .guize{
        width: p(515);
        position: absolute;
        top: p(58);
        left: 11%;
        background: rgba(1,1,1,0.5);
        padding-bottom: p(80);
        display: none;
        .close{
                width: p(38);
                height: p(38);
                overflow: hidden;
                background: transparent;
                margin-top: p(25);
                margin-left: p(451);
                margin-bottom: p(18);
                outline: 0;
                 img{
                    width: 100%;
                    }
            }
            .tou1{
                font-size: p(42);
                color: #ffffff;
                text-align: center;
            }
            .p1{
                font-size: p(28);
                color: #fff;
                margin-top: p(60);
                margin-left: p(42);
                margin-bottom: p(10);
            }
            .tou2{
                font-size: p(42);
                color: #ffffff;
                text-align: center;
                margin-top: p(43);
                 margin-bottom: p(60);
            }
            .p2{
                font-size: p(28);
                color: #fff;
                margin-left: p(42);
                margin-bottom: p(24);
            }
        }
}

//预加载页面
.loading{
    width: 100%;
    overflow: hidden;
    position: relative;
    display: none;
    .logo2{
        width: p(158);
        height: p(64);
        overflow: hidden;
        position: absolute;
        bottom: p(47);
        left: 39%;
        img{
            width: 100%;
        }
    }
    .bgimg img:nth-child(1){
          width: 100%;
          overflow: hidden;
          img{
              width: 100%;
            }
        }
    .bgimg img:nth-child(2){
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 46%;
        width: p(84);
        height: p(1021);
        img{
            width: 100%;
            }
    }    
        .shuiwen{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            animation-name: shuiwen;
            animation-duration:8s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
            z-index: 1;
            img{
                width: 100%;
            }
        }
        @keyframes shuiwen{
            0%{
                transform: scale(1);
            }
            25%{
                transform: scale(1.05);
            }
            50%{
                transform: scale(1);
            }
            75%{
                transform: scale(1.05);
            }
            100%{
                transform: scale(1);
            }
        }
        .zhuzi img:nth-child(1){
            position: absolute;
            top: 0;
            left: p(95);
            width: p(17);
            height: 100%;
            img{
                width: 100%;
            }
        }
        .zhuzi img:nth-child(2){
            position: absolute;
            top: 0;
            right: p(95);
            width: p(17);
            height: 100%;
            img{
                width: 100%;
            }
        }
        p{
            font-size: p(39);
            color: #fff;
            position: absolute;
            top: 43%;
            left: 41%;
        }
        .load{
            width: p(50);
            height: p(50);
            position: absolute;
            top: 39%;
            left: 47%;
            font-size: p(30);
            color: #fff;
            font-weight: bold;
        }
    }
//开始页面
.ready{
    display: none;
    .Longbgimg{
        width: p(640);
        height: p(1136);
        background: url(../img/LongIMG.png)no-repeat;
        background-size: cover;
        background-position-y: p(-7952);
    }
    .mudi{
        width: p(640);
        height: p(408);
        position: absolute;
        top: p(-480);
        z-index: 2;
        overflow: hidden;
//      transform: translateY(p(-500));
        img{
            width: 100%;
        }
    }
//  .bgimg img:nth-child(1){
//        width: 100%;
//        overflow: hidden;
//        img{
//            width: 100%;
//          }
//      }
//  .bgimg img:nth-child(2){
//      overflow: hidden;
//      position: absolute;
//      top: 0;
//      left: 46%;
//      width: p(84);
//      height: p(1021);
//      img{
//          width: 100%;
//          }
//  }    
        .shuiwen{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            animation-name: shuiwen;
            animation-duration:8s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
            z-index: 1;
            img{
                width: 100%;
            }
        }
        @keyframes shuiwen{
            0%{
                transform: scale(1);
            }
            25%{
                transform: scale(1.05);
            }
            50%{
                transform: scale(1);
            }
            75%{
                transform: scale(1.05);
            }
            100%{
                transform: scale(1);
            }
        }
//      .zhuzi img:nth-child(1){
//          position: absolute;
//          top: 0;
//          left: p(95);
//          width: p(17);
//          height: 100%;
//          img{
//              width: 100%;
//          }
//      }
//      .zhuzi img:nth-child(2){
//          position: absolute;
//          top: 0;
//          right: p(95);
//          width: p(17);
//          height: 100%;
//          img{
//              width: 100%;
//          }
//      }
     .Time{
        font-size: p(22);
        color: #fff;
        position: absolute;
        top: p(32);
        left: 48%;
        z-index: 2;
    }
    .miao{
        font-size: p(50);
        color: #fff;
        position: absolute;
        top: p(60);
        left: 42%;
        font-weight: bold;
        z-index: 2;
    }
//倒计时
.timeout{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    p:nth-child(1){
        font-size: p(100);
        color: #fff434;
        position: absolute;
        top: p(400);
        left: 31%;
        font-weight: bold;
        z-index: 1;
        display: block;}
    
    p:nth-child(2){
        font-size: p(174);
        color: #fff434;
        position: absolute;
        top: p(350);
        left: 45%;
        font-weight: bold;
        z-index: 1;
        display: none;
        animation-name: ppp;
        animation-duration:1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-iteration-count: 1;
    }
    @keyframes ppp{
        0%{
            transform: scale(1);
        }
        25%{
            transform: scale(1.1);
        }
        50%{
            transform: scale(0.7);
        }
        75%{
            transform: scale(0.3);
        }
        100%{
            transform: scale(0);
        }
    }
    p:nth-child(3){
        font-size: p(174);
        color: #fff434;
        position: absolute;
        top: p(350);
        left: 45%;
        font-weight: bold;
        z-index: 1;
        display: none;
        animation-name: ppp;
        animation-duration:1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-iteration-count: 1;
    }
    p:nth-child(4){
        font-size: p(174);
        color: #fff434;
        position: absolute;
        top: p(350);
        left: 45%;
        font-weight: bold;
        z-index: 1;
        display: none;
        animation-name: ppp;
        animation-duration:1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-iteration-count: 1;
    }
    p:nth-child(5){
        font-size: p(100);
        color: #fff434;
        position: absolute;
        top: p(400);
        left: 41%;
        font-weight: bold;
        z-index: 1;
        display: none;
        animation-name: ppp;
        animation-duration:1s;
//      animation-iteration-count: initial;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-iteration-count: 1;
    }
}
.win{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        z-index: 2;
    p{
        position: absolute;
        top: p(110);
        left: 10%;
        font-size: p(200);
        color: #FFF434;
//      z-index: 2;
        font-weight: bold;
    }
}
.lunbo{
    width: p(530);
    height: p(790);
     overflow: hidden;
    position: absolute;
    bottom: p(52);
    left: 9%;
    .swimmer{
       width: p(9999);
    //  background: url(../img/xuebi.png)no-repeat;
   
    //  background-size: auto 100%;
    //  animation-name: swimmer;
    //  animation-duration: 2s;
    //  animation-timing-function: steps(1,end);
    //  animation-iteration-count: infinite;
    //  animation-play-state: paused;
        .swimmer::after{
            content: "";//在imgBox后面添加空的块级元素
            display: block;
            clear: both;
        }
        li{
            float: left;
            width: p(530);
            height: p(790);
            img{
                width: 100%;
            }
        }
    }
}
//@keyframes swimmer{
//              0%{
//                  background-position-x:p(0);
//              }
//              6.25%{
//                  background-position-x:p(-530);
//              }
//              12.5%{
//                  background-position-x:p(-1060);
//              }
//              18.75%{
//                  background-position-x:p(-1590);
//              }
//              25%{
//                  background-position-x:p(-2120);
//              }
//              31.25%{
//                  background-position-x:p(-2650);
//              }
//              37.5%{
//                  background-position-x:p(-3180);
//              }
//              43.75%{
//                  background-position-x:p(-3710);
//              }
//              50%{
//                  background-position-x:p(-4240);
//              }
//              56.25%{
//                  background-position-x:p(-4770);
//              }
//              62.5%{
//                  background-position-x:p(-5300);
//              }
//              68.75%{
//                  background-position-x:p(-5830);
//              }
//              75%{
//                  background-position-x:p(-6360);
//              }
//              81.25%{
//                  background-position-x:p(-6890);
//              }
//              87.5%{
//                  background-position-x:p(-7420);
//              }
//              93.75%{
//                  background-position-x:p(-7950);
//              }
//              100%{
//                  background-position-x:p(0);
//              }
//          }
//左箭头
.left{
    width: p(252);
    height: p(149);
    overflow: hidden;
    position: absolute;
    left: p(25);
    bottom: p(70);
    z-index: 1;
    animation-name: shan;
    animation-duration:1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    img{
        width: 100%;
    }
}
@keyframes shan{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
    
}
//右箭头
.right{
    width: p(252);
    height: p(149);
    overflow: hidden;
    position: absolute;
    right: p(25);
    bottom: p(70);
    z-index: 1;
    animation-name: shan;
    animation-duration:1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    img{
        width: 100%;
    }
}
.move{
    font-size: p(31);
    line-height: p(31);
    color: #fff;
    position: absolute;
    bottom: p(48);
    left: 26%;
}

}

